<!-- 网络详情 -->
<template>
  <div class="app-container bgf5" style="min-height: calc(100vh - 84px)">
    <el-card>
      <div class="disFlx">
        <image-preview :src="info.networkIcon" :width="88" :height="88" />
        <div class="pl-15">
          <div>
            <span class="fw-7">{{ info.networkName }}</span>
            <span class="pl-10">(网络码：{{ info.networkCode }})</span>
            <el-button v-if="info.manageAuth === 1" type="success" plain size="mini" class="ml-20" @click="editTeam">编辑</el-button>
          </div>
          <div class="color6 pt-2 fz-14">
            <span>网络负责单位：</span>
            <span>{{ info.manageCompany || "" }}</span>
          </div>
          <div class="color6 pt-2 fz-14">
            <span>网络创建人：</span>
            <span>{{ info.creatorName || "" }}</span>
            <span class="px-10">|</span>
            <span>创建时间：</span>
            <span>{{ info.createTime }}</span>
          </div>
            <div class="color6 pt-2 fz-14">
            <span>简介：</span>
            <span>{{ info.networkProfile || "" }}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="mt-20">
      <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="90px"
    >
      <el-form-item label="关键字" prop="searchValue">
        <el-input
          v-model="queryParams.searchValue"
          placeholder="请输入成员名称/负责人/电话"
          clearable
          @keyup.enter.native="handleQuery"
          style="width:250px;"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
      <el-row v-if="info.manageAuth === 1" :gutter="10" class="mb-8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="openSelectCompany"
            >新增成员</el-button
          >
          <el-button
            type="success"
            plain
            icon="el-icon-edit-outline"
            size="mini"
            :disabled="!ids.length || ids.length > 1"
            @click="setLeader"
            >设为负责单位</el-button
          >
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="!ids.length"
            @click="batchRemove"
            >批量移除成员</el-button
          >
        </el-col>
      </el-row>

      <el-table :data="tableList" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
          :selectable="selectable"
        />
        <el-table-column
          label="网络成员"
          prop="cname"
          align="center"
        />
        <el-table-column
          label="成员身份"
          prop="memberType"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.memberType === 0 ? "创建人" : (scope.row.memberType === 1 ? "负责单位" : "成员") }}
          </template>
        </el-table-column>
        <el-table-column label="单位等级" prop="levels" width="100" align="center">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.company_level"
              :value="scope.row.levels"
            />
          </template>
        </el-table-column>
        <el-table-column
        label="单位类型"
        align="center"
        prop="comtype"
        width="100"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.company_type"
            :value="scope.row.comtype"
          />
        </template>
      </el-table-column>
        <el-table-column label="负责人" prop="contactName" align="center" width="100" />
        <el-table-column label="负责人电话" prop="phone" align="center" width="120" />
        <el-table-column
          label="加入时间"
          prop="joinTime"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.joinTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <SelectCompanyDialog ref="SelectCompanyDialog" @select="changeSelectCompany" />
    <EditMesh ref="EditMesh" @refresh="getDetail" />
  </div>
</template>

<script>
import { getNetworkDetail, getNetworkMemberList, addNetworkMember, deleteNetworkMember, setNetworkPerson } from "@/api/mesh/index.js";
import { deepClone } from '@/utils';
import SelectCompanyDialog from "../components/selectCompanyDialog";
import EditMesh from './editMesh'

export default {
  name: "MeshDetails",
  dicts: ["company_level", "company_type"],
  components: {
    SelectCompanyDialog,
    EditMesh
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        networkId: "",
        searchValue: ""
      },
      info: {},
      tableList: [],
    };
  },
  created() {
    this.queryParams.networkId = this.$route.params.networkId;
    this.getDetail();
    this.getList();
  },
  methods: {
    // 获取网络详情
    getDetail() {
      getNetworkDetail(this.queryParams.networkId).then((res) => {
        this.info = res.data;
      });
    },
    /** 查询网络成员列表 */
    getList() {
      getNetworkMemberList(this.queryParams).then((res) => {
        this.tableList = res.rows;
        this.total = res.total;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 打开选择单位弹窗
    openSelectCompany() {
      this.$refs.SelectCompanyDialog.openDialog({
        title: "新增网络成员",
        confirmText: "确认新增",
        companyidLs: this.info.companyidLs,
      });
    },
    changeSelectCompany(userIds) {
      let params = {
        networkId: this.queryParams.networkId,
        companyIds: userIds,
        memberType: 2, // 成员类型: 0创建人 1负责单位 2成员
      };

      addNetworkMember(params).then((res) => {
        this.getDetail();
        this.queryParams.pageNum = 1;
        this.getList();
        this.$message.success("新增成功");
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.memberId);
    },
    // 设为负责单位
    setLeader() {
      setNetworkPerson({
        memberId: this.ids[0],
        memberType: 1 // 成员类型: 0创建人 1负责单位 2成员
      }).then(() => {
        this.getDetail();
        this.getList();
        this.$message.success("负责单位设置成功");
      });
    },
    // 批量移除
    batchRemove() {
      let params = {
        networkId: this.queryParams.networkId,
        memberIds: this.ids
      };

      this.$modal
        .confirm('是否确认移除勾选的网络成员？')
        .then(function () {
          return deleteNetworkMember(params);
        })
        .then(() => {
          this.getDetail();
          this.queryParams.pageNum = 1;
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    editTeam() {
      this.$refs.EditMesh.openDialog(deepClone(this.info));
    },
    selectable(row, index) {
      return row.memberType === 0 ? false : true;
    }
  },
};
</script>

<style lang="scss" scoped></style>
